<template>
  <el-row class="room_detail_row">
    <!-- detail整体中间布局 -->
    <el-col :span="12" :offset="6" class="room_detail_col">
      <!-- 页头 -->
      <el-page-header @back="goBack" content="详情页面" class="page_header">
      </el-page-header>
      <!-- 商品详情 -->
      <template>
        <!-- 标题、价格 -->
        <el-row class="room_title_price">
          <el-col :span="12">
            <h2>{{ room.roomTitle }}</h2>
          </el-col>
          <el-col :span="12">
            <span class="price"> {{ room.roomPrice }} </span>
          </el-col>
        </el-row>
        <!-- 标签 -->
        <el-row class="room_label_box">
          <el-col
            v-for="(label, index) in room.roomLabel"
            :key="index"
            class="room_label_item"
          >
            <el-button size="mini" disabled round>
              {{ label }}
            </el-button>
          </el-col>
        </el-row>
        <!-- 描述 -->
        <el-row>
          <el-col>
            <el-input
              type="textarea"
              autosize
              :value="room.roomDescription"
              readonly
            ></el-input>
          </el-col>
        </el-row>
        <!-- 图片 -->
        <el-row>
          <el-col>
            <el-image
              class="room_image"
              v-for="(image, index) in room.roomImage"
              :key="index"
              :src="image"
            ></el-image>
          </el-col>
        </el-row>
        <!-- 发布信息 -->
        <el-row class="publish_info">
          <el-col :span="12"> 发布时间：{{ room.roomCreateTime }} </el-col>
          <el-col :span="4" :offset="8" class="uploaderInfo">
            <el-avatar :size="42" :src="room.uploaderAvatar"></el-avatar>
            <p class="room_uploader_username">{{ room.uploaderName }}</p>
          </el-col>
        </el-row>
        <el-row class="buy_button_row" v-if="myroom">
          <el-col :span="24">
            <el-button class="buy_button" @click="toBuy">买买买</el-button>
          </el-col>
        </el-row>
        <CustomLine margin="19px 0" border="2px dashed grey" />
      </template>
      <!-- 评论区 -->
      <Comment :itemId="room.roomId" :type="2" />
    </el-col>
  </el-row>
</template>

<script>
import axios from "@/request";
import Comment from "@/components/Comment.vue";
import { mapState } from "vuex";
import { Loading } from "element-ui";

export default {
  name: "RoomDetail",
  components: {
    Comment,
  },
  computed: {
    ...mapState("roomModule", ["room"]),
    myroom() {
      let user = this.$store.state.userModule.user.user;
      return user.id != this.room.uploaderId;
    },
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    toBuy() {
      let loading = Loading.service({
        text: "正在跳转支付宝支付...",
        target: ".good_detail_row",
      });
      axios
        .post("/alipay/toPay", {
          type: 2,
          itemId: this.room.roomId,
          sellerId: this.room.uploaderId,
          buyerId: this.$store.state.userModule.user.user.id,
          subject: this.room.roomTitle,
          price: this.room.roomPrice,
        })
        .then((res) => {
          if (res.data.code == 200) {
            let alipay = document.createElement("alipay");
            alipay.innerHTML = res.data.data;
            document.body.appendChild(alipay);
            document.forms[0].submit();
          } else {
            this.$message.error(res.data.data);
            loading.close();
          }
        })
        .catch((e) => {
          loading.close();
        });
    },
  },
};
</script>

<style scoped>
/* 滚动条相关配置 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f5cece;
}
::-webkit-scrollbar-thumb {
  background: red;
}

.room_detail_row {
  height: 100%;
}

.room_detail_col {
  height: 100%;
  background-color: #fff;
  padding: 20px;
  overflow: auto;
}

.page_header {
  padding: 10px 5px;
}

.room_title_price {
  display: flex;
  align-items: center;
}

.price::before {
  content: "￥";
  font-size: 24px;
  font-weight: 1000;
}

.price {
  float: right;
  font-size: 24px;
  font-weight: 1000;
  color: rgb(255, 145, 0);
}

.room_label_box {
  margin: 0 0 20px;
  display: flex;
  justify-content: left;
}

.room_label_item {
  width: 10%;
  margin-right: 10px;
}

.room_label_item >>> button {
  width: 100%;
  color: #ff0000;
  overflow: hidden;
}

.room_image {
  margin: 20px 20px 20px 0;
  border: 1px solid #e9e9eb;
  padding: 2px;
}

.room_image >>> .el-image__inner {
  max-height: 240px;
}

.publish_info {
  display: flex;
  align-items: center;
}

.uploaderInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

.room_uploader_username {
  width: 50%;
  word-wrap: nowarp;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buy_button_row {
  margin: 20px 0;
}

.buy_button {
  width: 100%;
  padding: 15px;
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>